<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/25
  Time: 16:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
    <head>
        <title>部员调动面板</title>
        <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    </head>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="/js/jquery-3.4.1.js" charset="utf-8"></script>
    <body>
    <form id="frm_job" class="layui-form" action="" style="margin-top: 10px">
        <div class="layui-form-item">
            <div class="layui-inline" style="width: 45%">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <select id="dept_id" lay-verify="required" lay-search lay-filter="chooseDept">
                        <option value="">请选择</option>
                        <c:forEach var="item" items="${dept}">
                            <option value="${item.dept_id}">${item.dept_name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="width: 45%">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-block">
                    <select id="position_id" lay-verify="required" lay-search>
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
    </body>
    <script>
        layui.use(['form'], function() {
            var form = layui.form;
            //部门下拉框监听事件，data为被选中的选项
            form.on("select(chooseDept)",function (data) {

                //部门id
                var dept_id = data.value;
                //发送异步请求查询部门职位
                $.ajax({
                    url: "/loginController/getPositionListByDeptId.do",
                    data: {
                        dept_id: dept_id
                    },
                    dataType: "json",
                    success: function (result) {//获得部门职位数组
                        //清空职位下拉框
                        $("#position_id").html("<option value=''>请选择</option>");
                        //循环部门职位
                        for (i in result) {

                            $("#position_id").append("<option value='" + result[i].position_id + "'>" + result[i].position_name + "</option>");
                        }
                        //重新渲染表单
                        form.render();
                    }
                });
            });
        });
    </script>
</html>
